import React, { useState } from "react";
import { Form, Radio, Modal, Button, Input } from "antd";

const Demo = () => {
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();

  // 假设这是Radio的当前值
  const [radioValue, setRadioValue] = useState("1");

  // 打开Modal
  const showModal = () => {
    setVisible(true);
  };

  // Modal的确认函数
  const handleOk = () => {
    // 这里假设我们直接改变radioValue，但在实际中，你可能需要根据Modal中的输入或选择来设置
    // 假设用户点击了“确定”，我们改变radioValue为'2'作为示例
    setRadioValue("2");

    // 如果你的Form和Radio是绑定的，你可能还需要通过form.setFieldsValue来更新Form中的值
    form.setFieldsValue({ radioField: "2" }); // 假设你的Form.Item name是"radioField"

    setVisible(false);
  };

  // Modal的取消函数
  const handleCancel = () => {
    setVisible(false);
  };

  // Radio的onChange事件处理函数（注意：这里只是展示如何打开Modal，并不直接改变值）
  const handleRadioChange = (e) => {
    // 在这里不直接设置state，而是打开Modal让用户确认
    showModal();
  };

  return (
    <Form form={form} layout="vertical">
      <Form.Item
        name="radioField"
        initialValue={radioValue} // 注意：这里设置了initialValue，但在动态更新时我们通常不使用它
      >
        <Radio.Group onChange={handleRadioChange}>
          <Radio value="1">Option 1</Radio>
          <Radio value="2">Option 2</Radio>
          <Radio value="3">Option 3</Radio>
        </Radio.Group>
      </Form.Item>

      <Modal
        title="确认"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>确定要更改选项吗？</p>
        {/* 这里可以添加额外的输入或选择框，根据需求 */}
      </Modal>
    </Form>
  );
};

export default Demo;
